<template>
    <el-dialog :title="dialogTitle" v-model="dialogVisible" width="60%" :close-on-click-modal="false">
        <el-form :model="formData" ref="formRef" :rules="formRules" label-width="120px">
            <el-form-item label="标题" prop="title">
                <el-input v-model="formData.title" placeholder="请输入标题" />
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input v-model="formData.description" placeholder="请输入描述" />
            </el-form-item>
            <el-form-item label="排序" prop="sort">
                <el-input v-model.number="formData.sort" placeholder="请输入排序" type="number" />
            </el-form-item>
            <el-form-item label="外部展示图片" prop="externalImage">
                <el-upload action="#" :file-list="fileList" :on-change="handleFileChange" :auto-upload="false"
                    accept="image/*">
                    <el-button size="small" type="primary">选择文件</el-button>
                    <div slot="tip" class="el-upload__tip">最佳尺寸为180*180</div>
                </el-upload>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <el-input v-model="formData.content" type="textarea" placeholder="请填写内容" :rows="5" />
            </el-form-item>
        </el-form>
        <template #footer>
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="submitForm">提交</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { watch } from 'vue'

const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    },
    dialogType: {
        type: String,
        default: 'add'
    },
    editData: {
        type: Object,
        default: () => ({})
    }
})

const emit = defineEmits(['closeDialog', 'saveData'])

const dialogVisible = ref(props.visible)
const formRef = ref(null)
const fileList = ref([])

const formData = reactive({
    id: '',
    title: '',
    description: '',
    sort: 0,
    externalImage: '',
    content: ''
})

const formRules = reactive({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    description: [{ required: true, message: '请输入描述', trigger: 'blur' }],
    sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
    content: [{ required: true, message: '请填写内容', trigger: 'blur' }]
})

// 监听visible变化，同步弹窗显示状态
watch(() => props.visible, (newVal) => {
    dialogVisible.value = newVal
    if (newVal) {
        if (props.dialogType === 'edit' && props.editData) {
            Object.assign(formData, props.editData)
            // 处理图片回显，假设editData中有externalImage字段存储图片信息
            if (props.editData.externalImage) {
                fileList.value = [{
                    name: props.editData.externalImage,
                    url: props.editData.externalImage,
                    status: 'success'
                }]
            }
        } else {
            // 重置表单
            formRef.value && formRef.value.resetFields()
            fileList.value = []
            formData.id = ''
            formData.title = ''
            formData.description = ''
            formData.sort = 0
            formData.externalImage = ''
            formData.content = ''
        }
    }
})

const handleFileChange = (file, files) => {
    fileList.value = files
    // 这里简单处理，实际可根据需求上传图片并获取地址
    formData.externalImage = file.name
}

const submitForm = () => {
    formRef.value.validate((valid) => {
        if (valid) {
            emit('saveData', { ...formData })
            emit('closeDialog')
            ElMessage.success('操作成功')
        }
    })
}

// 当弹窗关闭时，通知父组件
watch(dialogVisible, (newVal) => {
    if (!newVal) {
        emit('closeDialog')
    }
})
</script>

<style scoped>
/* 可根据需要添加样式 */
</style>